<template>
	<view class="container">
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>姓名
			</view>
			<input type="text" v-model="registration.inputPerson" placeholder="请输入登记人" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>联系方式
			</view>
			<input type="number" v-model="registration.inputPhone" placeholder="请输入联系方式" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>身份证号
			</view>
			<input type="idcard" v-model="registration.inputIdCard" placeholder="请输入身份证号" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>返乡时间
			</view>
			<view class="picker_class" @click="showDateTime">{{registration.inputTime}}</view>
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>来源类型
			</view>
			<view class="picker_class">
				<radio-group @change="radioChange" v-model="registration.resourceType">
					<label class="radio">
						<radio value="0" checked="true" style="transform: scale(0.6);" />国内
					</label>
					<label class="radio">
						<radio value="1" style="transform: scale(0.6);margin-left:10upx" />国外
					</label>
				</radio-group>
			</view>
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>来源地
			</view>
			<view class="picker_class" @click="showSource" v-if="registration.resourceType == '0'">
				{{registration.inputSource || "请选择来源地"}}
			</view>
			<input type="text" v-model="registration.inputSource" placeholder="请输入来源地" class="picker_class" v-else />
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>返回地
			</view>
			<view class="picker_class" @click="showTarget">{{registration.inputTarget}}</view>
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>详细地址
			</view>
			<textarea v-model="registration.inputAddressDetail" class="picker_content_class" placeholder-style="line-height:50upx"
			 placeholder="请输入详细地址(包括小区、楼栋、单元、房屋等信息)">
			 </textarea>
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>交通方式
			</view>
			<!-- <picker mode="multiSelector" :value="registration.inputTransport" :range="transportations" @change="bindTransportChange"
			 class="picker_class">
				<view class="uni-input">{{registration.inputTransport}}</view>
			</picker> -->
			<input type="text" v-model="registration.inputTransport" placeholder="请选择交通方式" class="picker_class" @click="chooseTransport" />
		</view>
		<view class="group_item">
			<view class="group_title">
				班次
			</view>
			<input type="text" v-model="registration.inputShift" placeholder="请输入班次" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>行程路径
			</view>
			<textarea v-model="registration.inputTravelPath" class="picker_content_class" placeholder-style="line-height:50upx"
			 placeholder="请输入行程路径(格式:来源地-返回地)">
			 </textarea>
		</view>
		<view class="group_item">
			<view class="group_title" style="width:400upx">
				<span style="color: red;">*</span>是否去过疫区
			</view>
			<view class="picker_class">
				<radio-group @change="isToEpidemicAreaRadioChange" v-model="registration.isToEpidemicArea">
					<label class="radio">
						<radio value="1" style="transform: scale(0.6);" />是
					</label>
					<label class="radio">
						<radio value="0" checked="true" style="transform: scale(0.6);margin-left:10upx" />否
					</label>
				</radio-group>
			</view>
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>体温
			</view>
			<input type="digit" v-model="registration.inputTemperature" placeholder="请输入体温" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>健康状况
			</view>
			<picker mode="selector" :value="registration.inputHealth" :range="healthArray" @change="bindHealthChange" class="picker_class">
				<view class="uni-input">{{registration.inputHealth}}</view>
			</picker>
		</view>
		<view class="group_item">
			<view class="group_title" style="width:440upx">
				<span style="color: red;">*</span>是否做过核酸检测
			</view>
			<view class="picker_class">
				<radio-group @change="isNucleicTestChange" v-model="registration.isNucleicTest">
					<label class="radio">
						<radio value="1" style="transform: scale(0.6);" />是
					</label>
					<label class="radio">
						<radio value="0" checked="true" style="transform: scale(0.6);margin-left:10upx" />否
					</label>
				</radio-group>
			</view>
		</view>
		<view class="group_item" style="display:block">
			<view class="group_title" style="width:100%">
				<span style="color: red;">*</span>健康码
			</view>
			<robby-image-upload v-model="registration.healthCodeImage" fileKeyName="file" :header="header" :formData="formData"
			 :server-url="uploadUrl" :showUploadProgress="true" limit="3"></robby-image-upload>
		</view>
		<view class="group_item" style="display:block">
			<view class="group_title" style="width:100%">
				<span style="color: red;">*</span>行程码
			</view>
			<robby-image-upload v-model="registration.travelCodeImage" fileKeyName="file" :header="header" :formData="formData"
			 :server-url="uploadUrl" :showUploadProgress="true" limit="3"></robby-image-upload>
		</view>
		<view class="group_item" style="display:block">
			<view class="group_title" style="width:100%">
				<span style="color: red;" v-if="registration.resourceType == '1'">*</span>核酸检查报告
			</view>
			<robby-image-upload v-model="registration.nucleicTestImage" fileKeyName="file" :header="header" :formData="formData"
			 :server-url="uploadUrl" :showUploadProgress="true" limit="3"></robby-image-upload>
		</view>
		<view class="group_item" style="margin-bottom: 200upx;">
			<view class="group_title">
				备注
			</view>
			<textarea v-model="registration.inputRemark" class="picker_content_class" placeholder-style="line-height:50upx"
			 placeholder="请输入备注">
			 </textarea>
		</view>

		<view>
			<wPicker mode="dateTime" @confirm="confirmDate" ref="dateTime" themeColor="#f00" :current="true"></wPicker>
			<wPicker mode="region" @confirm="confirmSource" ref="sourceRegion" themeColor="#f00" :defaultVal="defaultSourceRegion"
			 :hideArea="false" default-type="regionValue"></wPicker>
			<wPicker mode="region" @confirm="confirmTarget" ref="targetRegion" themeColor="#f00" :defaultVal="defaultSourceRegion"
			 :hideArea="false"></wPicker>
			<multiple-select v-model="transportShow" :data="transportations" :default-selected="defaultSelected" @confirm="confirmTransport"></multiple-select>
		</view>
		<button type="primary" class="button_class" @click="goToConfirm">确认</button>
	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import uniPopupDialog from "@/components/uni-popup-dialog/uni-popup-dialog.vue"
	import wPicker from "@/components/w-picker/w-picker.vue";
	import multipleSelect from "@/components/multiple-select/multiple-select";

	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				areaCode: this.$api.util.getAreaCode(),
				userId: "",
				regionValue: ['四川省', '成都市', '锦江区'],
				registration: {
					inputPerson: '',
					inputPhone: "",
					inputIdCard: "",
					inputTime: "请选择返乡时间",
					resourceType: "0",
					inputSource: "",
					inputTarget: "请选择返回地",
					inputAddressDetail: "",
					inputTransport: "请选择交通方式",
					inputShift: "",
					inputTravelPath: "",
					isToEpidemicArea: "0",
					inputTemperature: "",
					inputHealth: "请选择健康状况",
					isNucleicTest: "0",
					inputRemark: "",
					healthCodeImage: [],
					travelCodeImage: [],
					nucleicTestImage: [],
				},
				defaultSelected: [],
				transportShow: false,
				healthArray: ["健康", "不健康"],
				transportations: [{
					label: "火车",
					value: "火车",
				}, {
					label: "汽车",
					value: "汽车",
				}, {
					label: "飞机",
					value: "飞机",
				}, {
					label: "轮船",
					value: "轮船",
				}, {
					label: "自驾",
					value: "自驾",
				}, {
					label: "其他",
					value: "其他",
				}, ],
				defaultSourceRegion: ["四川省", "成都市", "武侯区"],
				header: {},
				formData: {},
				uploadUrl: this.$api.request.apiBaseUrl + 'uploadSingleImage/smartserver/H5',
				url: 'https://apis.map.qq.com/ws/geocoder/v1/'
			}
		},
		onLoad() {
			let userInfo = uni.getStorageSync("userInfo");
			if (userInfo) {
				this.userId = userInfo.userUuid
			}
			this.getOwnerInfo()
			// this.getLocation()
		},
		methods: {
			goToConfirm() {
				if (!this.registration.inputPerson) {
					this.$api.msg('请输入姓名');
					return;
				}
				if (!this.$api.util.validateMobileNo(this.registration.inputPhone)) {
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				if (!this.$api.util.validateIdCardNo(this.registration.inputIdCard)) {
					this.$api.msg('请输入正确的身份证号');
					return;
				}
				if (this.registration.inputTime == "请选择返乡时间") {
					this.$api.msg('请选择返乡时间');
					return;
				}
				if (this.registration.inputSource == "请选择来源地") {
					this.$api.msg('请选择来源地');
					return;
				}
				if (this.registration.inputTarget == "请选择返回地") {
					this.$api.msg('请选择返回地');
					return;
				}
				if (!this.registration.inputAddressDetail) {
					this.$api.msg('请输入详细地址');
					return;
				}
				if (this.registration.inputTransport == "请选择交通方式") {
					this.$api.msg('请选择交通方式');
					return;
				}
				if (!this.registration.inputTravelPath) {
					this.$api.msg('请输入行程路径');
					return;
				}
				if (!this.registration.inputTemperature) {
					this.$api.msg('请输入体温');
					return;
				}
				if (this.registration.inputHealth == "请选择健康状况") {
					this.$api.msg('请选择健康状况');
					return;
				}
				if (this.registration.healthCodeImage.length == 0) {
					this.$api.msg('请上传健康码截图或拍照');
					return;
				}
				if (this.registration.travelCodeImage.length == 0) {
					this.$api.msg('请上传行程码截图或拍照');
					return;
				}
				if (this.registration.nucleicTestImage.length == 0 && this.registration.resourceType == "1") {
					this.$api.msg('请上传核酸检测报告截图或拍照');
					return;
				}
				console.log(JSON.stringify(this.registration))
				uni.navigateTo({
					url: "/pages/epidemic/confirmInfo?item=" + encodeURIComponent(JSON.stringify(this.registration))
				})
			},
			getLocation() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: (res) => {
						console.log(res)
					},
					fail: (res) => {
						console.log(res)
						this.$api.msg("定位失败")
					},
					complete: (res) => {
						console.log(res)
						that.$jsonp(that.url, {
								key: "FSUBZ-BOA36-6N2SP-E25MI-WTA76-GMBEJ",
								callbackName: "getJsonData",
								output: "jsonp",
								location: res.latitude + "," + res.longitude
							})
							.then(json => {
								console.log(json)
							})
							.catch(err => {
								console.log(err)
							})
					}
				})
			},
			chooseTransport() {
				this.transportShow = true
			},
			/**
			 * 获取用户信息
			 */
			getOwnerInfo() {
				let params = {
					userId: this.userId
				}
				this.$api.request.getOwnerByUserId(params, (res) => {
					if (res.body.status.statusCode == "0") {
						let ownerInfo = res.body.data[0]
						if (ownerInfo) {
							this.registration.inputIdCard = ownerInfo.idCard;
							this.registration.inputPerson = ownerInfo.name;
							this.registration.inputPhone = ownerInfo.telNo;
						}
					}
				})
			},
			isNucleicTestChange(e) {
				this.registration.isNucleicTest = e.detail.value
			},
			bindHealthChange(e) {
				this.registration.inputHealth = this.healthArray[e.target.value] ? this.healthArray[e.target.value] : this.healthArray[
					0]
			},
			isToEpidemicAreaRadioChange(e) {
				this.registration.isToEpidemicArea = e.detail.value
			},
			bindTransportChange(e) {
				this.registration.inputTransport = this.transportations[e.target.value] ? this.transportations[e.target.value] :
					this.transportations[0]
			},
			radioChange(e) {
				this.registration.resourceType = e.detail.value
			},
			showTarget() {
				this.$refs['targetRegion'].show();
			},
			confirmTarget(e) {
				this.registration.inputTarget = e.result
			},
			showSource() {
				this.$refs['sourceRegion'].show();
			},
			confirmSource(e) {
				this.registration.inputSource = e.result
			},
			showDateTime() {
				this.$refs['dateTime'].show();
			},
			confirmDate(e) {
				this.registration.inputTime = e.result
			},
			confirmTransport(data) {
				console.log(data);
				this.registration.inputTransport = data.map((el) => el.label).join(",");
			},
		},
		components: {
			wPicker,
			multipleSelect,
			uniPopup,
			uniPopupDialog
		}
	}
</script>

<style>
	.container {
		width: 100%;
		background-color: #FBFBFB;
		overflow: hidden;
	}

	.tip {
		font-size: 18upx;
		color: #ff0000;
		font-weight: normal;
	}

	.group_item {
		width: 100%;
		padding: 0upx 30upx;
		margin: 10upx 0;
		display: flex;
		flex-direction: row;
		background-color: white;
	}

	.group_item1 {
		width: 100%;
		padding: 10upx 30upx;
		margin: 10upx 0;
		background-color: white;
		overflow: hidden;
	}

	.group_title1 {
		width: 100upx;
		font-size: 30upx;
		font-weight: bold;
	}

	.group_title {
		width: 200upx;
		padding-top: 30upx;
		/* height: 100upx; */
		/* line-height: 100upx; */
		font-size: 30upx;
		font-weight: bold;
	}

	.picker_class {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		margin-left: 30upx;
		font-size: 28upx;
		padding-left: 10upx;
	}

	.picker_content_class {
		width: 100%;
		height: 200upx;
		margin-top: 30upx;
		margin-left: 30upx;
		font-size: 28upx;
		padding-left: 10upx;
	}

	input {
		padding-left: 10upx;
	}

	.button_class {
		position: fixed;
		bottom: 40upx;
		margin-top: 20upx;
		width: 80%;
		margin-left: 10%;
		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
		background-color: #1DA3EE !important;
		color: white
	}
</style>
